<template>
  <div class="app-container">
    <div class="card-box">
      <el-table
        v-loading="merchantAgentStore.loading.list || merchantAgentStore.loading.update"
        :data="merchantAgentStore.list"
        row-id="id"
      >
        <el-table-column label="ID" prop="id" />
        <el-table-column label="名称" prop="name" />
        <el-table-column label="商户图片">
          <template #default="scope">
            <el-image
              :src="scope.row.store_image"
              alt="商户图片"
              style="width: 50px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" link @click="handleToTransactions(scope.row)">
              交易明细
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="params.page"
        v-model:page-size="params.size"
        style="margin-top: 10px"
        background
        :total="merchantAgentStore.totalCount"
        @change="merchantAgentStore.fetchList(params)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { type MerchantAgentListQuery, MerchantAgentItemType } from "@/api/merchant/agent";
import router from "@/router";
import { useMerchantAgentStoreHook } from "@/store/modules/merchant/agent";

const merchantAgentStore = useMerchantAgentStoreHook();

const params = reactive<MerchantAgentListQuery>({
  page: 1,
  size: 10,
});

function handleToTransactions(row: MerchantAgentItemType) {
  router.push({
    path: "/merchant/transactions",
    query: {
      id: row.id,
    },
  });
}

onMounted(() => {
  merchantAgentStore.fetchList(params);
});
</script>

<style scoped lang="scss"></style>
